<!--个人信息页面-->
<template>
  <div v-loading="loading"
       element-loading-text="正在修改,请稍等..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row :gutter="24">
      <!--<el-col :span="10" style="border:1px solid transparent">-->
      <!--  &lt;!&ndash;加上透明边界线,占位&ndash;&gt;-->
      <!--</el-col>-->
      <el-col :xs="24"
              :sm="12"
              :md="8"
              :lg="6">
        <div>
          <!--个人信息-->
          <el-form ref="modifyFormUsers"
                   :model="modifyFormUsers"
                   :rules="rulesUsers"
                   label-position="left" label-width="80px">
            <el-form-item label="" prop="toolsUserImg">
              <img style="margin-top: 20px;border-radius: 15px;cursor: pointer"
                   src="@/assets/img/lyy.jpeg" @click="changeImg()"
                   alt="头像" width="70" height="70"/>
            </el-form-item>
            <el-form-item label="用户名称" prop="username">
              <el-input style="width: 100%" v-model="modifyFormUsers.username" clearable show-word-limit :maxlength="50">
              </el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="modifyFormUsers.password" type="password" show-password clearable show-word-limit :maxlength="255">
              </el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="modifyFormUsers.phone" clearable show-word-limit :maxlength="11">
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="modifyFormUsers.email" clearable show-word-limit :maxlength="100">
              </el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="profile">
              <el-input sty v-model="modifyFormUsers.profile" clearable show-word-limit :maxlength="500">
              </el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="saveModifyUsers">修改</el-button>
        </div>
      </el-col>
      <!--<el-col :span="8" style="border:1px solid transparent">-->
      <!--  &lt;!&ndash;占位&ndash;&gt;-->
      <!--</el-col>-->
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import {modifyUsersInfo, getUsersInfoByUserName} from "@/api/userInfo";
import {getUserName, removeToken} from "@/api/token";
import lyy from '@/assets/img/lyy.jpeg'
export default {
  name: "UserBasicInfo",
  created() {
    this.userName = getUserName()
    this.querySelfInfoByUserName()
  },
  data() {
    return {
      avatar:lyy,
      loading:false,
      modifyFormUsers: {
        // "pageNum": 1,
        // "pageSize": 5,
        // "id": '',
        // "username": '',
        // "password": '',
        // "phone": '',
        // "email": '',
        // "createTime": "2024-08-24T06:11:05.000+00:00",
        // "updateTime": "2024-08-24T06:11:05.000+00:00",
        // "profile": '',
        // "avatar": '',
        // "remark": ''
      },
      // 校验规则
      rulesUsers: {
        "username": [
          {
            "required": true,
            "message": "用户名称不能为空",
            "trigger": "blur"
          }
        ],
        "password": [
          {
            "required": true,
            "message": "用户密码不能为空",
            "trigger": "blur"
          }
        ],
        "phone": [
          {
            "required": true,
            "message": "手机号不能为空",
            "trigger": "blur"
          }
        ],
        "email": [
          {
            "required": true,
            "message": "邮箱不能为空",
            "trigger": "blur"
          }
        ],
      },
      // 用户名称
      userName: '',
      // 用户信息
      userInfo: {
        // "pageNum": 1,
        // "pageSize": 5,
        // "id": '',
        // "username": '',
        // "password": '',
        // "phone": '',
        // "email": '',
        // "createTime": "2024-08-24T06:11:05.000+00:00",
        // "updateTime": "2024-08-24T06:11:05.000+00:00",
        // "profile": '',
        // "avatar": '',
        // "remark": ''
      }
    }
  },
  methods: {
    /**
     * 换头像
     */
    changeImg(){
      this.$message.warning("莫挨老子!")
    },
    /**
     * 判断俩对象是否发送变化
     * @param oldObj
     * @param newObj
     * @returns {boolean}
     */
    hasObjectChanged(oldObj, newObj) {
      return!_.isEqual(oldObj, newObj);
    },
    // 先根据用户名查询个人信息
    querySelfInfoByUserName() {
      if (this.userName !== '') {
        getUsersInfoByUserName(this.userName).then((res) => {
          // console.log('单个用户信息',res.data)
          this.userInfo = JSON.parse(JSON.stringify(res.data))   // 深拷贝一份   不然俩指的是同一个引用
          this.modifyFormUsers = res.data
        })
      } else {
        this.$message.warning("用户信息丢失,请刷新!")
      }
    },
    // 确定修改
    saveModifyUsers() {
      const hasChanged = this.hasObjectChanged(this.userInfo,this.modifyFormUsers)
      if(hasChanged){
        // 保存修改
        this.modifyFormUsers.avatar = this.avatar
        modifyUsersInfo(this.modifyFormUsers).then((res) => {
          if(res.data===false){
            this.$message.error(res.message)
          }else {
            this.loading=true
            setTimeout(()=>{
              this.$message.success("修改成功,请重新登录")
              this.loading=false
              removeToken()
              this.$router.push('/login-register')  // 返回登陆页面
            },2000)
          }
        })
      }else {
        this.$message.warning("曼波~~~你改了吗?你就提交!阿米诺斯!")
      }
    },
  }
}
</script>

<style scoped>

</style>